<script setup lang="ts">
import { ref } from "vue";
import type { Ref } from "vue";
import BySimpleTable from "@/components/By/BySimpleTable.vue";

const emit = defineEmits(["confirm"]);

const dialogVisible = ref(false);
const listData: Ref<any> = ref([]);

const columns = [
  {
    label: "ip地址",
    prop: "loginIp",
  },
  {
    label: "登录时间",
    prop: "createTime",
  },
  {
    label: "操作",
    prop: "operation",
    width: '40px'
  },
];

const handleForceReplace = (row: any) => {
  const { id } = row;
  console.log(row)
  emit("confirm", id);
  dialogVisible.value = false;
};
const handleClose = () => {
  dialogVisible.value = false;
};
const openDialog = (loginLogs: any) => {
  listData.value = loginLogs;
  dialogVisible.value = true;
};
defineExpose({
  openDialog,
});
</script>

<template>
  <el-dialog v-model="dialogVisible" width="100%" title="登录次数超出限制">
    <BySimpleTable :data="listData" :columns="columns">
      <template #operation="{ row }">
        <el-link
          type="primary"
          :underline="false"
          @click="handleForceReplace(row)"
        >
          替换
        </el-link>
      </template>
    </BySimpleTable>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.simple-table-wrapper {
  padding: 0;
}
.el-dialog {
  padding: 0;
}
</style>
